<!DOCTYPE html>
<html lang="${lang,escape}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="description" content="${AppName!}">
    <title>${AppName!}</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/common.css">
</head>
<body>
<!--[if lt IE 9]>
<div class="ie-must-go-die">
    <div class="ie-container">
        <h1>
            您正在IE的世界中
        </h1>
        <p>
            本系统不支持IE9以下版本浏览器访问。
        </p>
        <a href="https://browsehappy.com" target="_blank">
            您可以点击此处，下载Chrome/Firefox后再次访问本页面。
        </a>
    </div>
</div>
<![endif]-->
<div id="app" v-cloak>
    <div class="login-container">

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">

            <div class="bg_container">

            <div class="logo_container">
            <div class="title-container">
                <h3 class="title">${AppShrotName!}</h3>
                <!--<div class="lang">
                    <el-dropdown size="small" @command="handleCommand">
                        &lt;!&ndash;# if(lang==null||lang=="zh_CN"){ #&ndash;&gt;
                        <img src="${base!}/assets/platform/img/flags/cn.png" class="flag">
                        &lt;!&ndash;# }else{ #&ndash;&gt;
                        <img src="${base!}/assets/platform/img/flags/us.png" class="flag">
                        &lt;!&ndash;# } #&ndash;&gt;
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="en_US">
                                <img src="${base!}/assets/platform/img/flags/us.png" class="flag">
                                <span class="language">English</span>
                            </el-dropdown-item>
                            <el-dropdown-item command="zh_CN">
                                <img src="${base!}/assets/platform/img/flags/cn.png" class="flag">
                                <span class="language">中文</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>-->
            </div>

            <el-form-item prop="username">

                <el-input
                        v-trim v-model="loginForm.username"
                        placeholder="${msg['login.username']}"
                        name="username"
                        type="text"
                        auto-complete="on" prefix-icon="ti-user"
                        style="width: 100%"
                >
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input
                        :type="passwordType"
                        v-trim v-model="loginForm.password"
                        placeholder="${msg['login.password']}"
                        name="password"
                        auto-complete="on"
                        style="width: 100%"
                        @keyup.enter.native="doLogin" prefix-icon="ti-lock">
                    <i class="ti-eye" slot="suffix" @click="showPwd"> </i>
                </el-input>
            </el-form-item>

            <el-button :loading="loading" type="primary" style="margin-bottom:30px;width: 100%"
                       @click.native.prevent="doLogin">${msg['login.submit']}
            </el-button>

            <!--<el-button class="thirdparty-button" type="info" @click="showDialog=true">${msg['login.thirdparty']}
            </el-button>-->
            <!--<el-row>
                <p class="cp"><a href="http://ahtcjtgc.com" target="_blank">安徽天诚交通工程有限公司</a> ©
                    <span>{{year}}</span>
                </p>
            </el-row>-->
            </div>

            </div>
        </el-form>

        <el-dialog :close-on-click-modal="false" title="${msg['login.thirdparty']}" :visible.sync="showDialog" append-to-body>
            ${msg['login.thirdparty']}
            <br>
            <br>
            <br>
        </el-dialog>

        <el-dialog :close-on-click-modal="false" title="${msg['login.error.verifycode']}" :visible.sync="captchaVisible" @close="closeCaptchaForm"
                   append-to-body width="350px">
            <el-form :model="captchaForm" ref="captchaForm" :rules="codeRules">
                <el-row>
                    <el-col :span="11">
                    <el-form-item prop="verifycode">
                        <el-input maxlength="4" placeholder="${msg['login.captcha']}" v-trim v-model="captchaForm.verifycode"
                                  auto-complete="off" @keyup.enter.native="doCode"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="1">&nbsp;</el-col>
                    <el-col :span="12">
                        <el-form-item>
                    <img id="captcha_img" :src="codeUrl" @click="changeCode"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeCaptchaForm">取 消</el-button>
                <el-button type="primary" @click="doCode">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
<!-- import JavaScript -->
<script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
<script src="${base!}/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
<script>
    $(document).ready(function () {
        if (window != top) {
            top.location.href = location.href;
        }
    });

    new Vue({
        el: '#app',
        data: function () {
            return {
                year: 2024,
                captchaVisible: false,
                codeUrl: "${base!}/platform/login/captcha",
                captchaForm: {
                    verifycode:""
                },
                loginForm: {
                    username: '',
                    password: '',
                    platformCaptcha: ""
                },
                loginRules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: ['blur', 'change']}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: ['blur', 'change']}
                    ]
                },
                codeRules: {
                    verifycode: [
                        {required: true, message: '请输入验证码', trigger: ['blur', 'change']}
                    ]
                },
                passwordType: 'password',
                loading: false,
                showDialog: false
            }
        },
        methods: {
            showPwd: function () {
                if (this.passwordType === 'password') {
                    this.passwordType = ''
                } else {
                    this.passwordType = 'password'
                }
            },
            changeCode: function () {
                this.captchaForm.verifycode=""
                this.codeUrl = '${base!}/platform/login/captcha?_=' + new Date().getTime()
            },
            closeCaptchaForm: function () {
                this.captchaForm.platformCaptcha = ""
                this.captchaVisible = false
            },
            openCaptchaForm: function () {
                this.captchaForm.platformCaptcha = ""
                this.captchaVisible = true
                this.changeCode()
            },
            doCode: function () {
                var self = this
                self.$refs["captchaForm"].validate(function (valid) {
                    if(valid){
                        self.doLogin()
                    }
                })
            },
            doLogin: function () {
                var self = this
                self.loginForm.platformCaptcha=self.captchaForm.verifycode
                self.$refs["loginForm"].validate(function (valid) {
                    if (valid) {
                        $.post("${base!}/platform/login/doLogin", self.loginForm, function (d) {
                            if (d.code == 0) {
                                window.location.href = "${base!}/platform/home"
                            } else if (d.code == 1) {
                                self.openCaptchaForm()
                                self.$message({
                                    message: d.msg,
                                    type: 'error'
                                })
                            } else if (d.code == 2) {
                                self.openCaptchaForm()
                            } else {
                                self.changeCode()
                                self.$message({
                                    message: d.msg,
                                    type: 'error'
                                })
                                self.closeCaptchaForm();
                            }
                        }, "json");
                    }
                });
            },
            handleCommand: function (command) {
                window.location.href = "?lang=" + command
            }
        },
        created: function () {
            this.year = new Date().getFullYear()
        }
    })
</script>
<style scoped>
    #app {
        height: 100%;
    }

    body {
        margin: 0 0 0 0;
    }

    .login-container {
        background: linear-gradient(90deg,#279bff,#1543a2);
        height: 100%;
        position: fixed;
        width: 100%;
    }

    .login-container .login-form {
        left: 0;
        margin: 0 auto;
        padding: 0px 135px;
        /*position: absolute;*/
        right: 0;
        height: 100%;
    }

    .login-container .login-form .bg_container{
        max-width: 1510px;
        background-image: url(/assets/platform/img/loginBg.png);
        background-repeat: no-repeat;
        background-size: auto 100%;
        display: flex;
        height: 100%;
        background-position: 0 0;
        -webkit-align-items: flex-end;
        -webkit-box-align: end;
        justify-content: space-around;
        align-content: flex-end;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }
    .login-container .login-form .bg_container .logo_container{
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,.4);
        padding: 40px 50px 30px;
        position: relative;
        z-index: 3;
        width: 260px;
        margin: 0px auto;
    }


    .login-container .title-container .title {
        color: #1648a7;
        font-size: 26px;
        font-weight: 700;
        margin: 0 auto 40px;
        text-align: center;
    }

    .login-container .title-container .set-language {
        color: #fff;
        position: absolute;
        right: 0;
        top: 5px;
    }

    .login-container .show-pwd {
        color: #889aa4;
        cursor: pointer;
        font-size: 16px;
        position: absolute;
        right: 10px;
        top: 7px;
        user-select: none;
    }

    .thirdparty-button {
        position: absolute;
        bottom: -10px;
        right: 35px;
    }

    .cp {
        color: #ffffff;
        position: absolute;
        top: 50px;
        text-align: center;
        width: 100%;
        font-size: 12px;
    }

    .cp a {
        color: #ffffff;
    }

    .lang {
        text-align: right;
    }

    .flag {
        cursor: pointer;
        width: 16px;
        margin-top: -2px;
    }

    .captcha_row {
        float: left;
        margin: 10px;
        bottom: 30px;
    }

    .captcha_row div {
        width: 120px;
        float: left;
    }

    .captcha_row img {
        width: 120px;
        margin-left: 5px;
        float: left;
    }

    #captcha_img {
        height: 40px;
        cursor: pointer;
    }
</style>
</html>
